Top React Libraries — JSON, Visibility, and Datetime

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-json-view

react-json-view is library to let us render JSON with syntax highlighting on the screen.

To install it, we run:

npm i react-json-view

Then we can use it by writing:

import React from "react";
import ReactJson from "react-json-view";

const App = () => {
  return (
    <>
      <ReactJson src={{ foo: "bar", baz: 1 }} />
    </>
  );
};
export default App;

The ReactJson component lets us render JSON objects on the screen.

The src prop holds the JSON object to render.

Many options can be changed, including default value, styles, theme, icon styles, and more.

There’re also props for listening to add, edit, delete, select events, and more.

react-moment

react-moment is a useful library for letting us format dates.

To use it, we install it by running:

npm i react-moment moment

Then we can use it by writing:

import React from "react";
import Moment from "react-moment";

const dateToFormat = "2020-04-19T12:59-0500";

const App = () => {
  return (
    <>
      <Moment>{dateToFormat}</Moment>
    </>
  );
};
export default App;

The Moment component lets us format dates.

Wd can also pass in a Date instance:

import React from "react";
import Moment from "react-moment";

const dateToFormat = "2020-04-19T12:59-0500";

const App = () => {
  return (
    <>
      <Moment date={dateToFormat} />
    </>
  );
};
export default App;

We can set the interval so that the date updates at a given interval:

import React from "react";
import Moment from "react-moment";

const dateToFormat = "2020-04-19T12:59-0500";

const App = () => {
  return (
    <>
      <Moment interval={30000} date={dateToFormat} />
    </>
  );
};
export default App;

The interval value is in milliseconds.

The format can be changed with the format prop.

For example, we can write:

import React from "react";
import Moment from "react-moment";

const dateToFormat = "2020-04-19T12:59-0500";

const App = () => {
  return (
    <>
      <Moment format="YYYY/MM/DD" date={dateToFormat} />
    </>
  );
};
export default App;

to format the date into YYYY/MM/DD format.

Dates can also be parsed and rendered:

import React from "react";
import Moment from "react-moment";

const App = () => {
  return (
    <>
      <Moment parse="YYYY-MM-DD HH:mm">2020-04-19 12:59</Moment>
    </>
  );
};
export default App;

We pass in the date format string to the parse prop to parse it.

Also, we can get relative time with the fromNow and ago props:

import React from "react";
import Moment from "react-moment";

const App = () => {
  return (
    <>
      <Moment fromNow ago>
        2020-04-19 12:59
      </Moment>{" "}
    </>
  );
};
export default App;

fromNow renders the relative time and ago removes the suffix from it.

We can do many more things with it like changing time zones, elements to render the string in, localization, and more.

React Visibility Sensor

The React Visibility Sensor component lets us detect when something goes out of the window viewport.

To install it, we run:

npm i react-visibility-sensor

Then we can write:

import React from "react";
import VisibilitySensor from "react-visibility-sensor";

function onChange(isVisible) {
  console.log("Element is now %s", isVisible ? "visible" : "hidden");
}

const App = () => {
  return (
    <>
      {Array(100)
        .fill()
        .map((_, i) => (
          <VisibilitySensor onChange={onChange}>
            <div>item {i + 1}</div>
          </VisibilitySensor>
        ))}
    </>
  );
};
export default App;

to detect the visibility of the elements inside the VisibilitySensor component in the viewport.

The onChange function takes an isVisible parameter to let us know whether it’s visible or not.

We can change how it checks for visibility, including adding delays, throttling, offset, checking visibility for non-scrolling events, and more.

Conclusion

react-json-view renders JSON in our app.

react-moment lets us format time in our React app with moment.js.

React Visibility Sensor lets us watch for the visibility of elements.